<template>
    <section class="home">
        <article class="homeVideo">
            <div class="logo"></div>
            <div class="border"></div>
            <video ref="video" autoplay loop muted src="https://game.gtimg.cn/images/lol/act/a20210709sentinel/main/video.mp4">
            </video>
            <div class="title"></div>
        </article>
        <transition>
            <article class="tabs" v-if="showTabs">
                <div v-for="(item,index) in 7" :key="index" :class="['tab',tabIndex==index?'active':'',,hoverIndex==index?'active':'']" :style="{backgroundPosition:`0 ${-index*90}px`}" @click="clickTabs(index)" @mouseenter="hoverIndex=index" @mouseleave="hoverIndex=-1"></div>
            </article>
        </transition>
        <section class="videos">
            <div class="logo"></div>
            <div class="name"></div>
            <div class="introduction">
                <div class="title"></div>
                <div class="BigName">薇恩</div>
                <div class="type"></div>
                <div class="link">加入福星计划，可限时免费使用此皮肤</div>
                <div class="money">
                    <span class="sale">售价</span>
                    <div class="number">99</div>
                </div>
            </div>
            <video v-for="(item,index) in videoArr" autoplay loop muted :key="index" :src="`https://game.gtimg.cn/images/lol/act/a20210709sentinel/p/${item}.mp4`" class="hero" :style="{top:100*index+'vh'}">
            </video>
        </section>
    </section>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const tabIndex = ref<number>(0)
const hoverIndex = ref<number>(0)
const videoArr: string[] = [
    'vidp_wes_x264',
    'vidp_ly_x264',
    'vidp_pan_x264',
    'vidp_rw_x264',
    'vidp_alf_x264',
    'vidp_ps_x264',
    'vidp_pszq_x264'
]
interface video {
    ontimeupdate: () => void
    currentTime: number
}
const video = ref<video>()
const showTabs = ref<boolean>(false)
onMounted(() => {
    // 设置首页video循环播放
    let videoStatus = false
    const setVideoStatus = setTimeout(() => {
        videoStatus = true
    }, 16000)
    video.value!.ontimeupdate = () => {
        if (videoStatus) {
            clearTimeout(setVideoStatus)
            if (video.value!.currentTime >= 15) video.value!.currentTime = 8
        }
    }
    // 页面滚动后显示tabs列表
    window.onscroll = () => {
        if (document.documentElement.scrollTop <= 200) {
            showTabs.value = false
            return
        }
        showTabs.value = true
    }
})
const hero = ref(null)
function clickTabs(index: number): void {
    // 获取第二个视频距离第一个视频的高度
    const defaultTop = window.getComputedStyle(
        document.querySelectorAll<HTMLElement>('.hero')[1]
    ).top
    // 获取每个视频的高度
    const top = window.getComputedStyle(
        document.querySelectorAll<HTMLElement>('.hero')[index]
    ).top
    window.scrollTo({
        top:
            // 因为是字符串，所以需要处理一下，并且存在一定误差，所以加上10，大差不差
            parseFloat(top.split('px')[0]) +
            parseFloat(defaultTop.split('px')[0]) +
            10,
        behavior: 'smooth'
    })
    tabIndex.value = index
}
</script>

<style lang="less">
@import url(Home.less);
</style>